package com.csw.compose.ui.module.component.container

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowColumn
import androidx.compose.foundation.layout.FlowColumnOverflow
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.FlowRowOverflow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.MiniSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage


@Preview(heightDp = 2000)
@Composable
fun FlowPreview() {
    BasePage({}, "流式布局组件（Flow）") { FlowPage() }
}

class FlowData {
    companion object : Destination("FlowPage")
}

/**
 * [参考](https://developer.android.google.cn/develop/ui/compose/layouts/flow?hl=zh-cn)
 */
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun FlowPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("流式布局组件，FlowColumn为自动换列的Column")

        LargeSpacer()
        UlItem("FlowRow")
        LabelText("支持自动换行的Row")
        FlowRow(
            modifier = Modifier.fillMaxWidth().height(200.dp),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalArrangement = Arrangement.SpaceEvenly,
            maxItemsInEachRow = 4,
            maxLines = 3,
            overflow = FlowRowOverflow.Clip
        ) {
            (0..14).forEach {
                Box(
                    Modifier
                        .padding(10.dp)
                        .alpha(0.3f + 0.03f * it)
                        .background(Color.Red, RoundedCornerShape(20.dp))
                        .padding(10.dp),
                ) {
                    Text(
                        "item${it}",
                        color = Color.White
                    )
                }
            }
        }
        MiniSpacer()
        OlItem(1,"horizontalArrangement")
        LabelText("同Row，用于控制每一行item的排布方式，通常需要设置具体宽度才能其效果")
        MiniSpacer()
        OlItem(2,"verticalArrangement")
        LabelText("控制所有行的排布方式，需要提供比内容更高的容器高度才能起到效果")
        MiniSpacer()
        OlItem(3,"maxItemsInEachRow")
        LabelText("每一行的最大item数量")
        MiniSpacer()
        OlItem(4,"maxLines")
        LabelText("最大行数限制")
        MiniSpacer()
        OlItem(5,"overflow")
        LabelText("超出最大行数限制后的显示方式，默认是裁剪")

        LargeSpacer()
        UlItem("FlowColumn")
        LabelText("支持自动换行的Column，其可设置选项基本与FlowRow一致")
        FlowColumn (
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalArrangement = Arrangement.SpaceBetween,
            maxItemsInEachColumn = 4,
            maxLines = 3,
            overflow = FlowColumnOverflow.Clip
        ) {
            (0..14).forEach {
                Box(
                    Modifier
                        .padding(10.dp)
                        .alpha(0.3f + 0.03f * it)
                        .background(Color.Red, RoundedCornerShape(20.dp))
                        .padding(10.dp),
                ) {
                    Text(
                        "item${it}",
                        color = Color.White
                    )
                }
            }
        }
    }
}